<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Product Details</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/dining.css}" />
    <script th:src="@{/js/jquery-3.7.1.js}"></script>
</head>

<body>

<!-- 引入 top.html -->
<header th:replace="common/top"></header>

<div id="BackLink">
    <a th:href="@{/catalog/viewCategory(categoryId=${category.categoryId})}">
        Return to <span th:text="${category.categoryName}"></span>
    </a>
</div>

<div id="Catalog">

    <h2 th:text="${product.productName}">Product Name</h2>

    <table>
        <tr>
            <th>Item ID</th>
            <th>Product ID</th>
            <th>Description</th>
            <th>List Price</th>
            <th>&nbsp;</th>
        </tr>
        <tr th:each="item : ${itemList}" th:onclick="|window.location.href='@{/catalog/viewItem(categoryId=${category.categoryId},itemId=${item.itemId})}'|">
            <td>
                <a th:href="@{/catalog/viewItem(itemId=${item.itemId})}" th:text="${item.itemId}">Item ID</a>
            </td>
            <td th:text="${item.productId}">Product ID</td>
            <td>
                <span th:text="${item.attribute1}"></span>
                <span th:text="${item.attribute2}"></span>
                <span th:text="${item.attribute3}"></span>
                <span th:text="${item.attribute4}"></span>
                <span th:text="${item.attribute5}"></span>

            </td>
            <td th:text="${#numbers.formatCurrency(item.listPrice)}">List Price</td>
            <td>
                <a th:href="@{/cart/addItem(workingItemId=${item.itemId})}" class="Button">Add to Cart</a>
            </td>
        </tr>
    </table>

</div>

<!-- 引入 bottom.html -->
<footer th:replace="common/bottom"></footer>

</body>
</html>